<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCMenuEjecutivo.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <ui:param name="nombreparam" value="menuEjecutivo" />
    <h:panelGrid columns="3" id="paneldialogogriddata#{nombreparam}" styleClass="grid-modal-interno">

        <h:outputText value="(*)Descripci&#243;n  Corta:" />
        <h:column>
            <p:inputText id="descCortaEjc" value="#{pCMenuEjecutivo.temporal.descripcionCorta}" size="40" maxlength="40" required="true" requiredMessage="El campo Descripci&#243;n Corta es obligatrio"  
                         tabindex="1"/>
        </h:column>
        <p:message for="descCortaEjc" display="icon"/>

        <h:outputText value="(*)Descripci&#243;n Larga:" />                         
        <h:column>
            <p:inputTextarea style="margin-bottom: 5px" cols="60" rows="4"  tabindex="2" autoResize="false"  maxlength="255" id="descEjc" value="#{pCMenuEjecutivo.temporal.descripcionLarga}" 
                             required="true" requiredMessage="El campo Descripci&#243;n Larga es obligatrio" validatorMessage="El campo Descripci&#243;n  Larga no puede superar los 255 caracteres">
                <f:validateLength  maximum="255" />
            </p:inputTextarea>
        </h:column>
        <p:message for="descEjc" display="icon"/>

        <h:outputText value="(*)Día de la semana:" />
        <h:column>
            <p:selectOneMenu value="#{pCMenuEjecutivo.temporal.dia}" style="width:100px; margin-bottom: 5px; margin-left:3px" tabindex="3">
                <f:selectItems  value="#{pCMenuEjecutivo.dias}"></f:selectItems>   
            </p:selectOneMenu>                                      
        </h:column>
        <h:column/>

        <h:outputText value="(*)Precio:" />
        <h:column>
            <p:inputText id="precioEsp" value="#{pCMenuEjecutivo.temporal.precio}" size="10" maxlength="10" required="true" requiredMessage="El campo Precio es obligatrio"  
                         validatorMessage="El campo Precio debe ser num&#233;rico y mayor que 0" tabindex="4" label="Precio">
                <f:convertNumber pattern="#00.00" maxFractionDigits="2" />
                <f:validateLongRange minimum="1" />
            </p:inputText>
            <p:watermark for="precioEsp" value="Ej:10.00" />
        </h:column>
        <p:message for="precioEsp" display="icon"/>

        <h:outputText value="(*)Categor&#237;a:" />   
        <h:column>
            <p:selectOneMenu value="#{pCMenuEjecutivo.categoria}"  tabindex="4" style="width:100px; margin-bottom: 10px; margin-left:3px">
                <f:selectItems value="#{pCMenuEjecutivo.categorias}" />
                <p:ajax update=":tabs:formdata#{nombreparam}:productos" listener="#{pCMenuEjecutivo.cambiarProd}"/>
            </p:selectOneMenu>
        </h:column>   
        <h:column/>
        
    </h:panelGrid>
    
    <h:panelGrid columns="2">
    
        <p:dataTable value="#{pCMenuEjecutivo.productos}"
                     var="prod"
                     style="width:300px;float:left;margin-right: 10px;margin-left: 150px;"  
                     id="productos"
                     scrollHeight="80px"
                     rows="5"
                     paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                     lazy="true"
                     paginator="true"
                     resizableColumns="true"
                     paginatorAlwaysVisible="false"
                     emptyMessage="No hay productos que mostrar.">  
            <p:column headerText="Descr. Corta" style="width:25%">  
                <h:outputText value="#{prod.descripcionCorta}" />  
            </p:column>  
            <p:column headerText="Precio" style="width:25%">  
                <h:outputText value="#{prod.precio}" />  
            </p:column>

            <p:column headerText=" " style="width:25%" >
                <p:commandButton id="selectButton" 
                                 action="#{pCMenuEjecutivo.agrearMenuItem(prod)}" process="@this"
                                 value="++" title="Agregar" update=":tabs:formdata#{nombreparam}:dataProd :tabs:formdata#{nombreparam}:growldata#{nombreparam}" >
                </p:commandButton>
            </p:column>
        </p:dataTable> 
        <h:column>
            <p:dataTable value="#{pCMenuEjecutivo.temporal.listaProductos}"
                         var="prod"
                         id="dataProd"
                         style="width:300px;float:left;margin-right: 10px;margin-left: 30px;" 
                         scrollHeight="80px"
                         rows="5"
                         paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                         resizableColumns="true"
                         paginator="true"
                         lazy="true"
                         paginatorAlwaysVisible="false"
                         emptyMessage="No hay productos que mostrar.">  
                <p:column headerText="Id" style="width:25%">  
                    <h:outputText value="#{prod.id}" />  
                </p:column>  
                <p:column headerText="Descr. Corta" style="width:25%">  
                    <h:outputText value="#{prod.descripcionCorta}" />

                </p:column> 
                <p:column headerText="" style="width:25%">  
                    <p:commandButton id="selectButton" process="@this"
                                     actionListener="#{pCMenuEjecutivo.quitarMenuItem(prod)}" 
                                     value="--" title="Eliminar" update=":tabs:formdata#{nombreparam}:dataProd" />
                </p:column>
            </p:dataTable>  
        </h:column>
    </h:panelGrid>
    <h:panelGroup layout="block" style="overflow: auto; display: inline-block;height:50px; width: 100%">
        <p:commandButton value="Guardar" actionListener="#{pCMenuEjecutivo.guardar(nombreparam)}"
                         style="float: left;margin-top: 0px!important;margin-left: 150px;"  async="false"
                         update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam} growldata#{nombreparam} paneldialogogriddata#{nombreparam}"
                         id="btndata#{nombreparam}" widgetVar="wvbtndata#{nombreparam}" rendered="#{!pCMenuEjecutivo.esVer()}"
                         oncomplete="handle#{nombreparam}datarequest(xhr, status, args);"
                         styleClass="btn-aceptar">
            <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
        </p:commandButton>
        <p:commandButton value="#{pCMenuEjecutivo.devolverTxtBtnCancelarDlg()}" actionListener="#{pCMenuEjecutivo.reinicializarTemporal()}"
                         oncomplete="wvdlgdata#{nombreparam}.hide();"
                         style=" margin-top: 15px;" styleClass="btn-cancelar"
                         process="@this" update="paneldialogogriddata#{nombreparam}">
            <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
        </p:commandButton>
    </h:panelGroup>
    <p:commandLink value="#{pCMenuEjecutivo.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}"
                   process="@this" rendered="#{!pCMenuEjecutivo.esVer()}">
        <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
    </p:commandLink>


</ui:component>
